import { PlusOutlined } from '@ant-design/icons';
import {
  DrawerForm,
  ProForm,
  ProFormDateRangePicker,
  ProFormSelect,
  ProFormText,
} from '@ant-design/pro-components';
import { Button, Form, message } from 'antd';
import Item from "../Item";
import React from "react/index";
import { CheckCard } from '@ant-design/pro-components';
import { Avatar} from 'antd';
import {FormattedMessage} from "@@/exports";


const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

const BuyDrawerForm = () => {
  const [form] = Form.useForm<{ name: string; company: string }>();
  return (
    <DrawerForm<{
      name: string;
      company: string;
    }>
      title="购买商品服务"
      resize={{
        onResize() {
          console.log('resize!');
        },
        maxWidth: window.innerWidth * 0.8,
        minWidth: 400,
      }}
      form={form}
      trigger={
        <div>
        <Item
        imageSrc="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimi/iii.png"
        title="Your Custom Title"
        description="Your Custom Description"
        />
        </div>
      }
      autoFocusFirstInput
      drawerProps={{
        destroyOnClose: true,
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        await waitTime(2000);
        console.log(values.name);
        message.success('提交成功');
        // 不返回不会关闭弹框
        return true;
      }}
    >
      <ProForm.Group>
        <ProFormText
          name="name"
          width="md"
          label="购买商品名"
          tooltip="最长为 24 位"
          placeholder="请输入名称"
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="pages.searchTable.updateForm.ruleName.nameRules"
                  defaultMessage="请输入商品名！"
                />
              ),
            },
          ]}
        />

        <ProFormSelect
          options={[
            {
              value: 'year',
              label: '一年',
            },
            {
              value: 'season',
              label: '一季度',
            },
            {
              value: 'month',
              label: '一月',
            },
          ]}
          width="xs"
          name="useMode"
          label="选择使用时间"
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="pages.item.time.required"
                  defaultMessage="请选择使用时间！"
                />
              ),
            },
          ]}
        />
        <ProFormSelect
          options={[
            {
              value: 'none',
              label: '不使用优惠',
            },
            {
              value: '10count',
              label: '-10%',
            },
            {
              value: '20count',
              label: '-20%',
            },
          ]} width="xs"
          name="count"
          label="选择使用优惠"
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="pages.item.count.required"
                  defaultMessage="请选择使用优惠！"
                />
              ),
            },
          ]}
        />
      </ProForm.Group>
      <Form.Item name="specifications" label="选择规格" >
        <CheckCard.Group style={{ width: '100%' }}>
          <CheckCard
            defaultChecked
            title="精简版"
            avatar={<Avatar src="https://gw.alipayobjects.com/zos/bmw-prod/2dd637c7-5f50-4d89-a819-33b3d6da73b6.svg" size="large" />}
            description="基础功能，适合个人使用,$99.99"
            value="lite"
          />
          <CheckCard
            title="加强版"
            avatar={<Avatar src="https://gw.alipayobjects.com/zos/bmw-prod/6935b98e-96f6-464f-9d4f-215b917c6548.svg" size="large" />}
            description="加强功能，适合企业使用，$199.99"
            value="pro"
          />

        </CheckCard.Group>
      </Form.Item>
      <Form.Item name="features" label="选择功能点">
        <CheckCard.Group style={{ width: '100%' }} multiple={true}>
          <CheckCard
            title="高级搜索"
            avatar={<Avatar src="https://gw.alipayobjects.com/zos/bmw-prod/2dd637c7-5f50-4d89-a819-33b3d6da73b6.svg" size="large" />}
            description="提供高级搜索功能，允许用户根据多个条件进行筛选，￥9.9每次"
            value="search"

          />
          <CheckCard
            title="数据导出"
            avatar={<Avatar src="https://gw.alipayobjects.com/zos/bmw-prod/6935b98e-96f6-464f-9d4f-215b917c6548.svg" size="large" />}
            description="允许用户将数据导出为CSV或Excel格式，￥2.99"
            value="output"
          />
          <CheckCard
            title="实时通知"
            avatar={<Avatar src="https://gw.alipayobjects.com/zos/bmw-prod/d12c3392-61fa-489e-a82c-71de0f888a8e.svg" size="large" />}
            description="为用户提供实时更新通知功能，￥3.99"
            value="SOFABoot"
          />
        </CheckCard.Group>
      </Form.Item>
    </DrawerForm>
  );
};


export default BuyDrawerForm;
